<template>
	<view class="">
		<!-- 顶部自定义导航 -->
		<view class="top">
			<view class="top-title">
				<view class="top-title-dw" @tap="chooseCity()">
					<image src="../../static/index/dw1.png" mode=""></image>
					<text class="top-txt">{{choose_city}}</text>
				</view>
				<view class="top-txt1">装修设计</view>
				<view class="top-right"></view>
			</view>
		</view>
		<!-- 轮播图 -->
		<view class="">
			<!-- @click="$util.imageclicks($event, list2[$event])" -->
			<view class="swiper-w">
				<u-swiper :list="list2" radius="5" height="330rpx" indicator indicatorMode="dot" keyName="ad_image"
					circular></u-swiper>
			</view>
		</view>
		<view class="gongnenglist">
			<view class="gongneng" @click="tuzhi">
				<image src="../../static/index/tuzhi_icon@1x.png" mode="widthFix"></image>
				<text>免费图纸</text>
			</view>
			<view class="gongneng" @click="zaojia">
				<image src="../../static/index/jianfang.png" mode="widthFix"></image>
				<text>建房预算</text>
			</view>
			<view class="gongneng" @click="zhuangxiu">
				<image src="../../static/index/zhuangxiu_icon@1x.png" mode="widthFix"></image>
				<text>装修预算</text>
			</view>
			<view class="gongneng" @click="jiufang_go">
				<image src="../../static/index/jiufang_icon@1x.png" mode="widthFix"></image>
				<text>旧房改造</text>
			</view>
			<view class="gongneng" @click="jianzhuang">
				<image src="../../static/index/jianzhuang_icon@1x.png" mode="widthFix"></image>
				<text>建装信息</text>
			</view>
			<view class="gongneng" @click="cailiao_go">
				<image src="../../static/index/cailiao_icon@1x.png" mode="widthFix"></image>
				<text>建装材料</text>
			</view>
			<view class="gongneng" @click="shigongdui_go">
				<image src="../../static/index/shigongdui_icon@1x.png" mode="widthFix"></image>
				<text>优秀施工</text>
			</view>
			<view class="gongneng" @click="zhaosheji">
				<image src="../../static/index/sheji_icon@1x.png" mode="widthFix"></image>
				<text>优秀设计</text>
			</view>
		</view>
		<view class="zhaogong">
			<view class="tit">
				<view class="line"></view>
				<view class="tit-size">招工/找活推荐</view>
			</view>
			<view class="d-flex align-items justify-content-space-between">
				<image class="zg-img" src="../../static/index/zhaogong@1x.png" @click="zhaogong" mode="widthFix">
				</image>
				<image class="zg-img" src="../../static/index/zhaohuo@1x.png" @click="zhaohuo" mode="widthFix"></image>
			</view>
		</view>
		<!-- 案例展示 -->
		<view class="anli">
			<view class="d-flex align-items justify-content-space-between">
				<view class="tit">
					<view class="line"></view>
					<view class="tit-size">案例展示</view>
				</view>
				<view class="d-flex align-items" @click="anli_more">
					<view class="ck">查看更多</view>
					<image class="moreimg" src="../../static/index/more.png" mode="widthFix"></image>
				</view>
			</view>

			<view class="d-flex align-items justify-content-space-between">
				<view class="zhuti-w" @click="zhuti_jianfang_anli">
					<image class="zt-jf" src="../../static/index/img1@1x.png" mode="widthFix"></image>
					<view class="ztanli-txt">主体建房案例展示</view>
				</view>
				<view class="">
					<view class="anli-w" @click="zhuangxiu_anli">
						<image class="zxan" src="../../static/index/img2@1x.png" mode="widthFix"></image>
						<view class="zx-txt">设计案例展示</view>
					</view>
					<view class="zhanshi-w" @click="jiazhuang_anli">
						<image class="zhanshi" src="../../static/index/img3@1x.png" mode="widthFix"></image>
						<view class="zx-txt">家装案例展示</view>
					</view>
				</view>
			</view>
		</view>
		<view class="shops">
			<view class="d-flex align-items justify-content-space-between">
				<view class="tit">
					<view class="line"></view>
					<view class="tit-size">建装信息</view>
				</view>
				<view class="d-flex align-items" @click="jianzhuang_more">
					<view class="ck">查看更多</view>
					<image class="moreimg" src="../../static/index/more.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<scroll-view direction="horizontal" scroll-x="true" class="scroll-view_H">

			<view :class="jianzhuang.infotype.id == 1 ? 'scroll-view-item_H' : 'scroll-view-item_J'"
				v-for="(jianzhuang,index) in jianzhuangLists" :key="index">
				<view :class="jianzhuang.infotype.id == 1 ? 'jianfang-info' : 'jianfang-info-bule'">
					{{jianzhuang.infotype.name}}
				</view>
				<view class="d-flex align-items avart-img">
					<image class="touxiang-img" :src="jianzhuang.user.avatar" mode=""></image>
					<view class="name-t">{{jianzhuang.user.nickname}}</view>
					<view :class="jianzhuang.infotype.id == 1 ? 'shejishi' : 'guzhu'">{{jianzhuang.group.name}}</view>
				</view>
				<view :class="jianzhuang.infotype.id == 1 ? 'geyan' : 'guzhu_geyan'">{{jianzhuang.content}}</view>
				<view class="type-list d-flex align-items">
					<view class="type-list-m-gz" v-if="jianzhuang.infotype.id == 2">{{jianzhuang.mianji}}m²</view>
					<view class="type-list-m" v-if="jianzhuang.infotype.id == 1">
						{{jianzhuang.miankuan * jianzhuang.jinshen}}m²
					</view>
					<view class="type-list-m" v-if="jianzhuang.infotype.id == 1">长{{jianzhuang.miankuan}}m</view>
					<view class="type-list-m" v-if="jianzhuang.infotype.id == 1">宽{{jianzhuang.jinshen}}m</view>
				</view>
				<view @click="go_jianzhuang(jianzhuang)"
					:class="jianzhuang.infotype.id == 1 ? 'kankan d-flex align-items justify-content-center' : 'kankan_gz d-flex align-items justify-content-center'">
					<view class="go">去看看</view>
					<image class="go-img" src="../../static/index/fff.png" mode="widthFix"></image>
				</view>
			</view>
		</scroll-view>
		<!-- 商品推荐 -->
		<view class="">
			<view class="shops d-flex align-items justify-content-space-between">
				<view class="tit">
					<view class="line"></view>
					<view class="tit-size">生活家居</view>
				</view>
				<view class="d-flex align-items" @click="chakan_more">
					<view class="ck">查看更多</view>
					<image class="moreimg" src="../../static/index/more.png" mode="widthFix"></image>
				</view>
			</view>
			<!-- 商品列表 -->
			<view class="shopping d-flex align-items justify-content-space-between">
				<view class="shopping_list" @click="go_shop(shops)" v-for="(shops,index) in shopslist" :key="index">
					<image class="shopping_phone" :src="shops.product_images_first" mode=""></image>
					<view class="">
						<view class="sp-name">{{shops.infotype.name}}</view>
						<view class="sp-num"> <text class="fuhao">￥</text> {{shops.price}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 红包弹窗界面 -->
		<view class="">
			<u-popup mode="center" bgColor="transparent" :show="show">
				<view class="bg-top">
					<view class="fabu">发布信息得佣金</view>
					<view class="miaoshu">平台鼓励大家多多发布优质信息，客户点击【获取联系方式】后会得到相对应的佣金</view>
					<view class="money_num">{{money_t}} <text class="zi">元 / 次</text> </view>
					<view class="fenghao">*如果发布不实信息平台平台将会对您进行处罚，严重进行封号处理</view>
					<image class="zhidaobtn" @click="close" src="../../static/index/btn@1x.png" mode="widthFix"></image>
				</view>
			</u-popup>
		</view>
		<!-- 客服组件 -->
		<movable-area class="movableArea">
			<movable-view class="movableView" :position="position" :x="x" :y="y" :direction="direction"
				:damping="damping" @change="onChange" @touchend="onTouchend">
				<image src="../../static/index/xinxi_icon.png" mode="widthFix" class="iconImage"></image>
			</movable-view>
		</movable-area>
		<!-- 身份信息选择弹窗 -->
		<view class="">
			<u-popup :show="show_info" closeable mode="center" @close="show_info=false" :round="10">
				<view class="shenfen_info">
					<view class="shenfen_tit">请选择身份信息</view>
					<view class="u-radio_shenfen">
						<u-radio-group iconPlacement="right" borderBottom size="38rpx" shape="circle"
							v-model="radio_juese_value" placement="column">
							<u-radio :customStyle="{height:'80rpx',}" v-for="(item, index) in jueselists" :key="index"
								:label="item.name" @change="radioChange_info(item,index)" :name="item.id">
							</u-radio>
						</u-radio-group>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import {
		getmygroup,
		getXinxilist,
		get_current_city,
		index,
		pos_infos
	} from '@/api/user.js'
	import {
		mapState
	} from 'vuex';
	import util from '@/utils/util.js'
	export default {
		data() {
			return {
				show: true,
				choose_city: '请选择',
				jueselists: [],
				jianzhuangLists: [],
				radio_juese_value: '',
				show_info: false,
				location_success: false,
				location_interval: null,
				shopslist: [],
				list2: [], //轮播图
				x: 0,
				y: 0,
				x1: 0,
				x2: 0,
				y1: 0,
				y2: 0,
				move: {
					x: 0,
					y: 0
				},
				page: 1,
				limit: 7,
				district_id: '',
				city_id: '',
				province_id: '',
				money_t: '',
			}
		},
		props: {
			damping: {
				type: Number,
				default: 10
			},
			direction: {
				type: String,
				default: "all"
			},
			position: {
				type: Number,
				default: 4
			}
		},
		mounted() {
			uni.getSystemInfo({
				success: (res) => {
					this.x1 = 0;
					this.x2 = parseInt(res.windowWidth) - 50;
					this.y1 = 0;
					this.y2 = parseInt(res.windowHeight) - 20;
					setTimeout(() => {
						if (this.position == 1 || this.position == 2) this.y = parseInt(this.y2 * 0.2);
						if (this.position == 3 || this.position == 4) this.y = parseInt(this.y2 * 0.8);
						if (this.position == 1 || this.position == 3) this.x = parseInt(this.x1);
						if (this.position == 2 || this.position == 4) this.x = parseInt(this.x2);
						this.move.x = this.x;
						this.move.y = this.y;
					}, 1000)
				}
			})
		},
		onLoad() {
			util.getLocation().then(
				r => {
					console.log('r', r);
					get_current_city({
						lat: +r[0],
						lng: +r[1]
					}).then(res => {
						console.log('city res__________________', res);
						this.location_success = true
						if (this.location_interval) {
							clearInterval(this.location_interval)
						}
						if (res.code == 1) {
							console.log("获取位置信息", res);
							this.choose_city = res.data.city
							this.province_id = res.data.province_id
							this.city_id = res.data.city_id
							this.district_id = res.data.district_id
							uni.setStorageSync('city_id', res.data.city_id)
						}
					})
					//建房信息 & 产品信息
					this.get_shop_info_list()
					// this.get_jianfang_list()
				}).catch(e => {
				//建房信息 & 产品信息
				this.get_shop_info_list()
				// this.get_jianfang_list()
			})

			this.get_index()
			this.get_lunbo()
		},
		onShow() {
			this.page = 1;
			this.get_role();
			this.get_jianfang_list()
		},
		// 用户下拉加载
		onPullDownRefresh() {
			this.page = 1
			this.get_shop_info_list()
		},
		// 上拉触底加载
		onReachBottom() {
			this.page++
			this.get_shop_info_list()
		},
		methods: {
			// 获取轮播图
			get_lunbo() {
				var data = {
					id: 1,
				}
				pos_infos(data).then(res => {
					console.log("获取轮播图列表", res);
					if (res.code == 1) {
						this.list2 = res.data
					}
				})
			},
			get_index() {
				index({}).then(res => {
					console.log("获取文章列表", res);
					if (res.code == 1) {
						this.money_t = res.data.xieyi.viewuser
					}
				})
			},
			// 获取顶部添加之后的角色信息列表
			get_role() {
				getmygroup({}).then(res => {
					console.log("获取顶部角色列表", res);
					if (res.code == 1) {
						this.jueselists = res.data.grouplist
					}
				})
			},
			// 主体建房案例展示
			zhuti_jianfang_anli() {
				uni.navigateTo({
					url: '/pagesA/anli_zhanshi/anli?zhuti=8'
				})
			},
			// 装修案例展示
			zhuangxiu_anli() {
				uni.navigateTo({
					url: '/pagesA/anli_zhanshi/anli?zhuti=3'
				})
			},
			// 家装案例展示
			jiazhuang_anli() {
				uni.navigateTo({
					url: '/pagesA/anli_zhanshi/anli?zhuti=6'
				})
			},
			jianzhuang_more() {
				uni.navigateTo({
					url: '/pagesA/index_top/jianzhuang'
				})
			},
			// 获取建装信息列表
			get_jianfang_list() {
				var data = {
					page: this.page,
					limit: this.limit,
					type: '1,2',
					// province: this.province_id,
					// city:this.city_id,
				}
				getXinxilist(data).then(res => {
					console.log("的发生大法师", res);
					if (res.code == 1) {
						this.jianzhuangLists = res.data.list
					}
				})
			},
			// 获取信息列表
			get_shop_info_list() {
				var data = {
					page: this.page,
					limit: this.limit,
					type: 11,
				}
				getXinxilist(data).then(res => {
					console.log("的发生大法师", res);
					if (res.code == 1) {
						if (this.page == 1) {
							this.shopslist = res.data.list
						} else {
							this.shopslist = this.shopslist.concat(res.data.list)
						}
						uni.stopPullDownRefresh()
					}
				})
			},
			chooseCity() {
				uni.navigateTo({
					url: '/pagesA/choose_adress/adress'
				})
			},
			close() {
				this.show = false
				// console.log('close');
			},
			// 这个是拖动客服按钮
			onChange(e) {
				if (e.detail.source === "touch") {
					this.move.x = e.detail.x;
					this.move.y = e.detail.y;
				}
			},
			// 这个点击客服按钮
			onTouchend(e) {
				if (!uni.getStorageSync('token')) {
					uni.showToast({
						title: '请登录后发布',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}, 500)
				} else {
					this.x = this.move.x;
					this.y = this.move.y;
					setTimeout(() => {
						if (this.move.x < this.x2 / 2) this.x = this.x1;
						else this.x = this.x2;
						console.log(this.x, this.y)
					}, 100)
					if (this.jueselists) {
						this.radio_juese_value = 0;
						this.show_info = true
					} else {
						uni.showToast({
							title: '请添加角色信息',
							icon: 'none'
						})
					}
				}
			},
			// 信息发布选择身份信息弹窗
			radioChange_info(n, idx) {
				console.log("选择第几个身份", n, idx);
				if (n.status == 0) {
					uni.showToast({
						title: '角色信息正在审核中，请耐心等待！',
						icon: 'none'
					})
				}
				if (n.status == 1) {
					uni.navigateTo({
						url: '/pagesB/info_fabu/guzhu_info_fabu?id=' + n.id
					})
				}
				if (n.status == 2) {
					uni.showToast({
						title: '角色信息正在审核失败，请点击上方角色文字框去修改！',
						icon: 'none'
					})
				}
				this.show_info = false;
				this.radio_juese_value = "";
			},
			// 我要招工
			zhaogong() {
				uni.navigateTo({
					url: '/pagesA/zhaogong/my_zhaogong'
				})
			},
			// 跳转建房和装修信息页面
			go_jianzhuang(e) {
				uni.navigateTo({
					url: '/pagesA/index_top/juese_detail?id=' + e.group_id + '&user_id=' + e.user_id +
						'&content_id=' + e.content_id
				})
			},
			// 我要找活
			zhaohuo() {
				uni.navigateTo({
					url: '/pagesA/zhaogong/my_zhaohuo'
				})
			},
			// 旧房改造
			jiufang_go() {
				uni.navigateTo({
					url: '/pagesA/index_top/jiufang_list'
				})
			},
			// 查看更多商品推荐
			chakan_more() {
				uni.switchTab({
					url: '/pages/jiaju/jiaju'
				})
			},
			zaojia() {
				uni.navigateTo({
					url: '/pagesA/index_top/zaojia'
				})
			},
			zhuangxiu() {
				uni.navigateTo({
					url: '/pagesA/index_top/zhuangxiu'
				})
			},
			tuzhi() {
				uni.navigateTo({
					url: '/pagesA/index_top/tuzhi'
				})
			},
			jianzhuang() {
				uni.navigateTo({
					url: '/pagesA/index_top/jianzhuang'
				})
			},
			cailiao_go() {
				uni.navigateTo({
					url: '/pagesA/index_top/cailiao_shang'
				})
			},
			shigongdui_go() {
				uni.navigateTo({
					url: '/pagesA/index_top/shigongdui'
				})
			},
			zhaosheji() {
				uni.navigateTo({
					url: '/pagesA/index_top/zhaosheji'
				})
			},
			// 案例展示
			anli_more() {
				uni.navigateTo({
					url: '/pagesA/anli_zhanshi/anli'
				})
			},
			// 跳转到商品页面
			go_shop(e) {
				uni.navigateTo({
					url: '/pagesA/anli_zhanshi/shopping?id=' + e.content_id
				})
			},
		}
	}
</script>

<style>
	.shenfen_tit {
		font-size: 30rpx;
		font-weight: 600;
		color: #000;
		padding-top: 30rpx;
		text-align: center;
	}

	.u-radio_shenfen {
		width: 600rpx;
		margin: auto;
	}

	.shenfen_info {
		width: 650rpx;
	}

	.zhidaobtn {
		width: 358rpx;
		margin: auto;
		display: block;
		margin-top: 55rpx;
	}

	.fenghao {
		width: 412rpx;
		font-size: 24rpx;
		font-weight: normal;
		line-height: 30rpx;
		margin: auto;
		text-align: center;
		color: rgba(254, 249, 211, 0.71);
		text-shadow: 0px 2rpx 4rpx #ED291E;
	}

	.zi {
		font-size: 24rpx;
		font-weight: normal;
		color: #FFFFFF;
		margin-left: 10rpx;
	}

	.money_num {
		font-size: 64rpx;
		font-weight: 600;
		color: #FFFFFF;
		text-align: center;
	}

	.miaoshu {
		width: 395rpx;
		line-height: 45rpx;
		font-size: 26rpx;
		color: #FFFFFF;
		text-shadow: 0px 2rpx 4rpx #ED291E;
		margin: auto;
		margin-top: 40rpx;
		text-align: center;
	}

	.fabu {
		font-size: 30rpx;
		text-align: center;
		color: #F45525;
		margin-top: 322rpx;
	}

	.bg-top {
		width: 559rpx;
		background: url('https://lianfan.nccpu.cn/image/beijing.png') no-repeat;
		background-size: 100% auto;
	}

	.fuhao {
		font-size: 24rpx;
		font-weight: 600;
		color: #FF4D4F;
	}

	.sp-num {
		font-size: 36rpx;
		font-weight: 600;
		color: #FF4D4F;
		margin: 0rpx 0 15rpx 24rpx;
	}

	.sp-name {
		width: 295rpx;
		font-size: 30rpx;
		color: #333;
		font-weight: 600;
		margin-left: 20rpx;
		margin-top: 20rpx;
		overflow: hidden;
		display: -webkit-box;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.shopping_phone {
		width: 335rpx;
		height: 335rpx;
		display: block;
		border-top-right-radius: 8rpx;
		border-top-left-radius: 8rpx;
	}

	.shopping_list {
		width: 335rpx;
		background-color: #fff;
		border-radius: 8rpx;
		margin-bottom: 20rpx;
	}

	.shopping {
		width: 690rpx;
		margin: auto;
		flex-wrap: wrap;
	}

	.shops {
		width: 690rpx;
		margin: auto;
		margin-top: 30rpx;
	}

	.kankan_gz {
		width: 150rpx;
		height: 50rpx;
		border-radius: 40rpx;
		background: #3197F6;
		margin: 16rpx 0 0 24rpx;
	}

	.kankan {
		width: 150rpx;
		height: 50rpx;
		border-radius: 40rpx;
		background: #FF822E;
		margin: 16rpx 0 0 24rpx;
	}

	.go-img {
		width: 28rpx;
		display: block;
	}

	.go {
		font-size: 24rpx;
		font-weight: normal;
		color: #FFFFFF;
	}

	.type-list {
		margin-left: 24rpx;
		margin-top: 10rpx;
	}

	.type-list-m {
		padding: 7rpx 15rpx;
		font-size: 20rpx;
		color: #AE6F43;
		border-radius: 4.5px;
		background: #FFDCC4;
		margin-right: 10rpx;
	}

	.type-list-m-gz {
		padding: 7rpx 15rpx;
		font-size: 20rpx;
		color: #398CC9;
		border-radius: 4.5px;
		background: #BDE4FF;
		margin-right: 10rpx;
	}

	.geyan {
		width: 397rpx;
		font-size: 24rpx;
		line-height: 32rpx;
		height: 64rpx;
		color: #A05C2F;
		margin-left: 24rpx;
		margin-top: 11rpx;
		overflow: hidden;
		display: -webkit-box;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		white-space: normal;
	}

	.guzhu_geyan {
		width: 397rpx;
		font-size: 24rpx;
		line-height: 32rpx;
		height: 64rpx;
		color: #15496E;
		margin-left: 24rpx;
		margin-top: 11rpx;
		overflow: hidden;
		display: -webkit-box;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		white-space: normal;
	}

	.jianfang-info,
	.jianfang-info-bule {
		width: 120rpx;
		height: 36rpx;
		background-color: #FF822E;
		border-radius: 0px 8rpx 0px 12rpx;
		position: absolute;
		right: 0;
		top: 0;
		font-size: 23rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 30rpx;
	}

	.jianfang-info-bule {
		background-color: #3197f6 !important;
	}

	.avart-img {
		padding: 35rpx 0 0 24rpx;
	}

	.guzhu {
		padding: 0 12rpx;
		height: 32rpx;
		border-radius: 4rpx;
		opacity: 1;
		margin-left: 20rpx;
		border: 1.07rpx solid #087EED;
		font-size: 20rpx;
		color: #087EED;
		text-align: center;
	}

	.shejishi {
		padding: 0 12rpx;
		height: 32rpx;
		border-radius: 4rpx;
		opacity: 1;
		margin-left: 20rpx;
		background: rgba(255, 255, 255, 0.08);
		border: 1.07rpx solid #FF822E;
		font-size: 20rpx;
		color: #FF822E;
		text-align: center;
	}

	.name-t {
		max-width: 150rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 28rpx;
		font-weight: normal;
		color: #1C2023;
		margin-left: 10rpx;
	}

	.touxiang-img {
		width: 66rpx;
		height: 66rpx;
		display: block;
		border-radius: 50%;
	}

	.scroll-view-item_H {
		width: 431rpx;
		height: 310rpx;
		border-radius: 10rpx;
		background: #FAEBE1;
		position: relative;
		display: inline-block;
		margin-left: 24rpx;
	}

	.scroll-view-item_J {
		width: 431rpx;
		height: 310rpx;
		border-radius: 10rpx;
		background: #D6EEFF;
		position: relative;
		display: inline-block;
		margin-left: 24rpx;
	}

	.scroll-view_H {
		width: 100%;
		white-space: nowrap;
	}

	.margin-top-30 {
		margin-top: 30rpx;
	}

	.anli {
		width: 690rpx;
		margin: auto;
		margin-top: 30rpx;
	}

	.zx-txt {
		top: 40rpx !important;
	}

	.ztanli-txt,
	.zx-txt {
		position: absolute;
		left: 26rpx;
		top: 53rpx;
		font-size: 32rpx;
		color: #fff;
		font-weight: 600;
	}

	.zhuti-w,
	.anli-w {
		position: relative;
		width: 336rpx;
	}

	.zhanshi-w {
		position: relative;
		width: 336rpx;
		margin-top: 18rpx;
	}

	.zxan,
	.zhanshi {
		width: 336rpx;
		display: block;
	}

	.zt-jf {
		width: 336rpx;
		display: block;
	}

	.moreimg {
		width: 12rpx;
		display: block;
		margin-left: 10rpx;
	}

	.ck {
		font-size: 30rpx;
		font-weight: normal;
		color: #989898;
	}

	.zg-img {
		width: 336rpx;
		display: block;
	}

	.zhaogong {
		width: 690rpx;
		margin: auto;
	}

	.tit-size {
		font-size: 36rpx;
		font-weight: 600;
		margin-left: 10rpx;
		color: #333;
	}

	.tit {
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		margin-bottom: 30rpx;
	}

	.line {
		width: 8rpx;
		height: 38rpx;
		background: #FF6400;
	}

	.gongneng {
		width: 25%;
		text-align: center;
		margin-bottom: 52rpx;
	}

	.gongneng image {
		width: 90rpx;
		display: block;
		margin: auto;
	}

	.gongneng text {
		font-size: 24rpx;
		margin-top: 16rpx;
		color: #333333;
		display: block;
	}

	.gongnenglist {
		width: 690rpx;
		margin: auto;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	/* 客服系统样式 */
	.movableArea {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none; //设置area元素不可点击，则事件便会下移至页面下层元素
		z-index: 999;
	}

	.movableView {
		pointer-events: auto; //可以点击
		width: 200rpx;
		height: 200rpx;
		padding: 10rpx;
		border-radius: 100%;
	}

	.iconImage {
		display: block;
		width: 200rpx;
		// animation: iconImage 5s linear infinite;
	}

	@keyframes iconImage {
		0% {
			-webkit-transform: rotate(0deg);
		}

		25% {
			-webkit-transform: rotate(90deg);
		}

		50% {
			-webkit-transform: rotate(180deg);
		}

		75% {
			-webkit-transform: rotate(270deg);
		}

		100% {
			-webkit-transform: rotate(360deg);
		}
	}

	/* 客服 */
	.contact {
		width: 50px;
		height: 50px;
		overflow: hidden;
		position: absolute;
		left: 0px;
		top: 0px;
		border-radius: 100%;
		opacity: 0;
	}

	.swiper-w {
		width: 690rpx;
		margin: auto;
		margin-top: 14vh;
		margin-bottom: 40rpx;
	}

	page {
		background-color: #F7F8FB;
	}

	.top-right {
		width: 30%;
	}

	.top-txt {
		font-size: 30rpx;
		font-weight: 400;
		color: #333;
		margin-left: 10rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.top-txt1 {
		width: 40%;
		font-size: 30rpx;
		text-align: center;
		font-weight: 400;
		color: #000;
	}

	.top {
		display: flex;
		width: 750rpx;
		height: 12vh;
		background-color: #fff;
		position: fixed;
		top: 0rpx;
		z-index: 2;
	}

	.top-title {
		width: 100%;
		display: flex;
		margin-top: 56rpx;
		align-items: center;
	}

	.top-title-dw {
		width: 30%;
		display: flex;
		align-items: center;
		margin: auto;
	}

	.top image {
		width: 36rpx;
		height: 36rpx;
		display: block;
		margin-left: 40rpx;
	}
</style>